<template>
    <div>
        <div class="title">
            <el-select clearable v-model="operatorId" placeholder="请选择代理商" style="width: 120px;">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.operatorNm"
                        :value="item.operatorId"
                ></el-option>
            </el-select>
            <el-select clearable v-model="orderState" placeholder="全部状态" style="width: 120px;margin-left:20px;">
              <el-option label="下单" value="1"></el-option>
              <el-option label="已取消" value="2"></el-option>
              <el-option label="已完成" value="3"></el-option>
              <el-option label="退款" value="4"></el-option>
            </el-select>
            <el-input style="width:180px;margin-left:20px;" placeholder="订单号 | 手机号 | 卡号" v-model="userOrNum"></el-input>
<!--            <el-input style="width:180px;margin-left:20px;" placeholder="端口号88-6 | 下发状态" v-model="portCode"></el-input>-->
            <el-date-picker style="margin-left:20px;"
                            v-model="ketime"
                            type="daterange"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy 年 MM 月 dd 日"
                            value-format="yyyy-MM-dd"
            >
            </el-date-picker>


            <el-button @click="searchData" type="primary" style="margin-left:20px;" icon="el-icon-search">搜索</el-button>
        </div>
        <div class="data">
            <el-table v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
                <el-table-column prop="ordernumber" label="订单号" align="center" min-width="90"></el-table-column>

                <el-table-column prop="chargeStatus" label="充电状态" align="center" min-width="80"></el-table-column>
<!--                <el-table-column prop="messageState" label="下发状态" align="left" min-width="80"></el-table-column>-->
                <el-table-column prop="orderstate" label="订单状态" align="center" min-width="80"></el-table-column>
                <el-table-column prop="mobile" align="center" label="手机号" min-width="90"></el-table-column>
<!--                <el-table-column prop="cardName" align="left" label="卡号" min-width="60" :show-overflow-tooltip="true"></el-table-column>-->
<!--                <el-table-column prop="starttime" label="开始时间" align="left" min-width="100"></el-table-column>-->
<!--                <el-table-column prop="endtime" label="预计结束时间" align="left" min-width="100"></el-table-column>-->
<!--                <el-table-column prop="realEndTime" label="实际结束时间" align="left" min-width="100"></el-table-column>-->
<!--                <el-table-column prop="realEndTime" label="用时时长" :formatter="formatDuring" align="left" min-width="100"></el-table-column>-->
<!--                <el-table-column prop="estimateAmount" label="预计费用" align="center" min-width="60"></el-table-column>-->
<!--                <el-table-column prop="orderGold" label="实际金额" align="center" min-width="60"></el-table-column>-->
<!--                <el-table-column prop="refundAmount" label="退款金额" align="center" min-width="60"></el-table-column>-->
                <!--<el-table-column prop="0" label="实际结束时间" align="center" min-width="100"></el-table-column>
                <el-table-column prop="0" label="预计金额"  align="left" min-width="80"></el-table-column>-->
                <el-table-column prop="parkId" label="充电桩编号" align="center" min-width="100"></el-table-column>
                <el-table-column prop="portName" label="端口" align="center" min-width="60" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="realHour" label="充电时长" align="center" min-width="80">
                <template slot-scope="scope">
                  <span>{{scope.row.realHour}}h</span>
                </template>
              </el-table-column>
              <el-table-column prop="orderGold" label="订单金额"  align="center" min-width="80"></el-table-column>
              <el-table-column prop="cardNo" label="支付类型" :formatter="cpCardNo" align="center" min-width="80"></el-table-column>
              <el-table-column prop="createTime" label="创建时间" align="center" min-width="130"></el-table-column>
              <!--                <el-table-column prop="consumePower" label="耗电量" align="left" min-width="60"></el-table-column>-->
<!--                <el-table-column prop="chargingCurrent" label="电流" align="left" min-width="60"></el-table-column>-->
<!--                <el-table-column prop="chargingCdgl" label="功率" align="left" min-width="60"></el-table-column>-->
<!--                <el-table-column prop="orderType" label="类型" align="left" min-width="70"></el-table-column>
                              <el-table-column prop="pileName" label="电桩地址" align="left" min-width="80" :show-overflow-tooltip="true"></el-table-column>-->
<!--                <el-table-column prop="agentName" label="代理商" align="left" min-width="80"></el-table-column>-->
                <el-table-column label="操作" align="left" min-width="80">
                    <template slot-scope="scope">
                        <div class="editCell">
                            <el-link @click="detailHandler(scope.row)">详情</el-link>
                            <el-link v-if="scope.row.orderstate=='支付成功'" @click="refundHandler(scope.row)">退款</el-link>
<!--                            <el-link @click="changePort(scope.row)">端口更改</el-link>-->
                            <!-- <i @click="deleteHandler(scope.row)" class="el-icon-delete"></i> -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page="page"
                    :page-size="pageSize"
                    :total="total"
            ></el-pagination>
        </div>

        <el-dialog title="退款" :visible.sync="dialogVisibleRefund" width="450px">
            <div class="order">
                <el-form ref="formRefund" :model="formDataRefund" label-width="100px">
                    <div class="order-1">
                        <div class="text">订单编号</div>
                        {{data.ordernumber}}
                    </div>
                    <div class="order-1">
                        <div class="text">用户名</div>
                        {{data.userName}}
                    </div>
                    <div class="order-1">
                        <div class="text">订单金额</div>
                        {{data.orderGold}}
                    </div>
                    <div class="order-1">
                        <div class="text">充电桩编号</div>
                        {{data.parkId}}
                    </div>
                    <div class="order-1">
                        <div class="text">端口号</div>
                        {{data.portName}}
                    </div>
                    <el-form-item class="nav-form-item" label="退款金额" prop="amount"
                                  style="margin-top:20px;margin-left:-20px">
                        <el-input
                                maxlength="6"
                                type="text"
                                v-model="formDataRefund.refundAmount"
                                style="width:250px;margin-left: 25px;"
                                placeholder="请输入退款金额"
                                clearable
                        />
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleRefund = false">取 消</el-button>
        <el-button type="primary" @click="confimRefundHandler">确 定</el-button>
      </span>
        </el-dialog>


        <el-dialog title="变更端口" :visible.sync="dialogVisiblePort" width="40%">
            <div class="order">
                <el-form ref="formPort" :model="formDataPort" label-width="100px">
                    <div class="order-1">
                        <div class="text">订单号</div>
                        {{data.ordernumber}}
                    </div>
                    <div class="order-1">
                        <div class="text">充电桩号</div>
                        {{data.parkId}}
                    </div>
                    <div class="order-1">
                        <div class="text">端口号</div>
                        {{data.portName}}
                    </div>
                    <el-form-item class="nav-form-item" label="充电桩编号"
                                  style="margin-top:20px;margin-left:-20px">
                        <el-input
                                maxlength="10"
                                type="text"
                                v-model="formDataPort.parkId"
                                style="margin-left:20px;width:300px;"
                                placeholder="请输入充电桩编号"
                                clearable
                        />
                    </el-form-item>
                    <el-form-item class="nav-form-item" label="端口号"
                                  style="margin-top:20px;margin-left:-20px">
                        <el-input
                                maxlength="6"
                                type="text"
                                v-model="formDataPort.portCode"
                                style="margin-left:20px;width:300px;"
                                placeholder="请输入端口号"
                                clearable
                        />
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisiblePort = false">取 消</el-button>
        <el-button type="primary" @click="confimChangePort">确 定</el-button>
      </span>
        </el-dialog>
        <!-- { "id": 3312, "userName": "Sword", "price": null, "orderstate": "下单",
        "starttime": "2019-10-07 11:26:46", "endtime": "2019-10-07 15:26:46", "
        ordernumber": "86568679", "outTradeNo": null, "orderType": "按小时计费订单", "hour": "4" }-->
        <el-dialog title="查看详情" :visible.sync="dialogVisible" width="800px">
            <div class="order">
                <div class="order-1">
                    <div class="text">订单号</div>
                    {{data.ordernumber}}
                </div>
                <div class="order-1">
                    <div class="text">预计用时</div>
                    {{data.hour}}小时
                </div>
                <div class="order-1">
                    <div class="text">名字</div>
                    {{data.userName}}
                </div>
                <div class="order-1">
                    <div class="text">金额</div>
                    {{data.price}}
                </div>
                <div class="order-1">
                    <div class="text">订单类型</div>
                    {{data.orderType}}
                </div>
                <div class="order-1">
                    <div class="text">订单状态</div>
                    {{data.orderstate}}
                </div>

                <div class="order-1">
                    <div class="text">开始时间</div>
                    {{data.starttime}}
                </div>
                <div class="order-1">
                    <div class="text">完成时间</div>
                    {{data.endtime}}
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>
    import {getOrderList, getOrderData, refundOrder,ChangePort} from '@/api/order'
    import {getDataScopeList} from '@/api/user'

    export default {
        data() {
            return {
                operatorId: null,
                orderState: null,
                dialogVisible: false,
                options: [],
                tableData: [],
                cardNo: this.$route.query.cardNo,
                page: 1,
                pageSize: 10,
                loading: true,
                total: 0,
                data: {},
                portCode: '',
                userOrNum: '',
                ketime: [],
                dialogVisibleRefund: false,
                dialogVisiblePort: false,
                formDataRefund: {
                    refundAmount: "",
                    orderId: "",
                    orderGold: ""
                },
                formDataPort: {
                    parkId: "",
                    orderId: "",
                    portCode: ""
                }
            }
        },
        created() {
            this.getDataList()
            this.getDataScopeList()
        },
        methods: {
          cpCardNo(row) {
            if (row.cardNo) {
              return '卡支付'
            } else {
              return '在线支付'
            }
          },
            formatDuring(row) {
                var res="";
                if(row.realEndTime!=null){
                    var mss = new Date(row.realEndTime) - new Date(row.starttime);
                    var days = parseInt(mss / (1000 * 60 * 60 * 24));
                    var hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                    var minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
                    var seconds = (mss % (1000 * 60)) / 1000;
                    if(hours>0)  res+=hours+"时";
                    /*if(minutes>0)*/  res+=minutes+"分";
                    /*if(seconds>0)*/  res+=seconds+"秒";
                }

                return res;
            },
            refundHandler(row) {
                this.data = row
                this.formDataRefund.orderId = row.id
                this.formDataRefund.orderGold = row.orderGold
                this.formDataRefund.refundAmount = ""
                this.dialogVisibleRefund = true
            },
            changePort(row) {
                this.data = row
                this.formDataPort.orderId = row.id
                this.formDataPort.parkId=""
                this.formDataPort.portCode=""
                this.dialogVisiblePort=true
            },
            confimChangePort() {
                if (!this.formDataPort.parkId || !this.formDataPort.portCode) {
                    this.$message.error("请填写充电桩编号或者端口号")
                    return;
                }
                this.$refs.formPort.validate(valid => {
                    if (valid) {
                        console.log(this.formDataPort)
                        ChangePort(this.formDataPort).then(res => {
                            if (res.message.code != 0) {
                                this.$message.error(res.message.message)
                            } else {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                })
                                this.dialogVisiblePort = false
                                this.getDataList()
                            }
                        })
                    }
                })
            },
            confimRefundHandler() {
                if (this.formDataRefund.refundAmount*1 <= 0 || this.formDataRefund.refundAmount*1 > this.formDataRefund.orderGold*1) {
                    this.$message.error("退款金额应在0到订单金额之间哦")
                    return;
                }
                this.$refs.formRefund.validate(valid => {
                    if (valid) {
                        console.log(this.formDataRefund)
                        refundOrder(this.formDataRefund).then(res => {
                            if (res.message.code != 0) {
                                this.$message.error(res.message.message)
                            } else {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success'
                                })
                                this.dialogVisibleRefund = false
                                this.getDataList()
                            }
                        })
                    }
                })
            },
            getDataScopeList() {
                getDataScopeList().then(res => {
                    if (res.data && res.data.length > 0) {
                        this.options = [...res.data]
                    }
                })
            },
            searchData() {
                this.page = 1
                this.getDataList()
            },
            getDataList() {
                this.loading = true
                console.log('userOrNum' + this.userOrNum)
                let param = {
                    userId: this.operatorId,
                    orderState: this.orderState,
                    userOrNum: this.userOrNum,
                    portCode: this.portCode,
                    cardNo: this.cardNo,
                    pageNo: this.page,
                    pageSize: this.pageSize,
                    startTime: this.ketime[0],
                    endTime: this.ketime[1],
                }
                getOrderList(param).then(res => {
                    if (res.message.status == 200) {
                        this.tableData = [...res.data.records]
                        this.total = res.data.total
                    }

                    this.loading = false
                })
            },
            handleCurrentChange(val) {
                this.page = val
                this.getDataList()
            },
            detailHandler(row) {
                // let param = {
                //     orderNumber: row.ordernumber
                // }
                // getOrderData(param).then(res => {
                //     this.dialogVisible = true
                //     this.data = Object.assign({}, res.data)
                // })
              this.$router.push({
                path: 'order/orderDetail',
                query: {
                  orderNumber: row.ordernumber
                }
              })
            }
        }
    }
</script>
<style scoped lang="scss">
    .data {
        margin-left: 20px;
        margin-top: 20px;
        margin-right: 10px;
    }
    .title {
        margin-left: 20px;
        margin-top: 20px;
        display: flex;
        flex-direction: row;
    }

    .order {
        display: flex;
        flex-direction: column;
        color: #fff;
        .text {
            color: #4adfff;
            width: 100px;
        }
        .order-1 {
            padding: 8px 10px;
            display: flex;
        }
    }
    .tipjd-box{
      display: flex;
    }
    .tipjd-box .jt-item{
      width: 25%;
      text-align: center;
    }
    .tipjd-box .jt-item p .el-icon-success{
      font-size: 40px;
      margin-bottom: 10px;
      color: #008000;
    }
</style>
